<template>
    <div class="layer-list-wrap">
        <div v-for="chart in sortList" :key="chart.code"
        :class="{
          'layer-list-item': true,
          'layer-list-item-active': chart.code === activeCode
        }"
        @click="changeActiveCode(chart.code)">
            <DragOutlined class="layer-list-item-icon"/>
            <div class="layer-list-item-name">{{chart.title}}</div>
        </div>
        <!-- <div v-if="!chartList.length" class="layer-empty">
            <img src="../../images/empty.png" alt="">
            未拖拽任何组件
        </div> -->
    </div>
</template>
<script setup>
import { DragOutlined } from "@ant-design/icons-vue";
// import { useBigScreenStore } from '@/stores/bigScreen.js'
import { storeToRefs } from 'pinia'
import { computed, ref } from "vue";

// let bigScreenStore = useBigScreenStore();
// const { chartList,activeCode } = storeToRefs (bigScreenStore);

// let sortList = computed(() => [...chartList.value].sort((a, b) =>  b.z - a.z)); 
let sortList = ref([]); 
const changeActiveCode = (vm)=>{
//    bigScreenStore.changeActiveCode(vm)
}
</script>
<style lang="scss" scoped>
.layer-list-wrap{
    width: 100%;
    padding: 0 5% 0 3%;
    .layer-list-item{
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        cursor: move;
        &-icon{
            margin-right: 5px;
        }
        &-name {
            font-size: 14px;
            color: #fff;
            // 超出省略
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &-active,&:hover {
            background-color: var(--color-primary-weak);
            .layer-list-item-name,.layer-list-item-icon{
                color: var(--color-primary);
            }
        }
    }
    .layer-empty{
        margin-top: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: pf;
        color: #DCDEE0;
        img{
            width: 80%;
        }
    }
}
</style>